<template>
  <div>
    <div v-show="!isShowFlowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshFuc" :hasGoBack="isHasGoBack" @goBack="goPrewview"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="settlementInfo" ref="settlementInfo">
          <el-form-item label="流水编号:" prop="tradeNo" v-if="$route.params.telphone">
            <el-input v-model="settlementInfo.tradeNo" clearable ref="input-tradeNo" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="流水编号:" prop="tradeNo" v-if="!$route.params.telphone">
            <el-input v-model="settlementInfo.tradeNo" clearable ref="input-tradeNo" @keyup.enter.native="enterNextInput('telphone')"></el-input>
          </el-form-item>
          <el-form-item label="供应商账号:" prop="telphone" v-if="!$route.params.telphone">
            <el-input v-model="settlementInfo.telphone" clearable ref="input-telphone" @keyup.enter.native="enterNextInput('enterpriseName')"></el-input>
          </el-form-item>
          <el-form-item label="供应商企业名称:" prop="enterpriseName" v-if="!$route.params.telphone">
            <el-input v-model="settlementInfo.enterpriseName" clearable ref="input-enterpriseName" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="结算事项:" prop="type">
            <el-select v-model="settlementInfo.type" clearable placeholder="全部">
              <el-option label="入账" value="1"></el-option>
              <el-option label="出账" value="2"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date label="结算时间段:" :startTime.sync="settlementInfo.startTime" :endTime.sync="settlementInfo.endTime"></jxf-Date>
          <el-form-item label="摘要:" prop="businessType">
            <el-select v-model="settlementInfo.businessType" clearable placeholder="全部">
              <el-option label="提现" value="31"></el-option>
              <el-option label="审核转入" value="32"></el-option>
              <el-option label="提现手续费" value="33"></el-option>
              <el-option label="清算转入" value="34"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('settlementInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="settlementTable">
          <template slot="createTime" slot-scope="account">
            <div>{{account.row.createTime ? FormatDate.timeFormat(account.row.createTime) : ""}}</div>
          </template>
          <template slot="type" slot-scope="account">
            <div v-if="account.row.type === 1">入账</div>
            <div v-if="account.row.type === 2">出账</div>
            <div v-else></div>
          </template>
          <template slot="businessType" slot-scope="account">
            <div v-if="account.row.businessType === 31">提现</div>
            <div v-if="account.row.businessType === 32">审核转入</div>
            <div v-if="account.row.businessType === 33">提现手续费</div>
            <div v-if="account.row.businessType === 34">清算转入</div>
            <div v-else></div>
          </template>
          <template slot="amount" slot-scope="account">
            <div>￥{{account.row.amount && account.row.amount != 0 ? formatMoney.twoDecimal(account.row.amount) : '0.00'}}</div>
          </template>
          <template slot="changedAmount" slot-scope="account">
            <div>￥{{account.row.changedAmount && account.row.changedAmount != 0 ? formatMoney.twoDecimal(account.row.changedAmount) : '0.00'}}</div>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  export default {
    name: "supplierBalanceAccountFlow",
    components: {   },
    props: {

    },
    data() {
      return {
        title: this.$route.params && this.$route.params.title ? this.$route.params.title : "供应商余额账户流水",
        settlementInfo: {
          tradeNo: "",
          type: "",
          businessType: null,
          startTime: "",
          endTime: "",
          telphone: "",
          userType:2
        },
        isHasGoBack: this.$route.params && this.$route.params.userId ? false : false,
        isSuccess: false,
        formatMoney: formatMoney,
        FormatDate: FormatDate,
        isShowFlowDetail: false,
        settlementTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '1',
              label: '流水编号',
              prop: 'tradeNo',
              width: '200',
              fixed: "left"
            },
            {
              id: '2',
              label: '供应商账号',
              minWidth: '100',
              prop: 'telphone'
            },
            {
              id: '3',
              label: '供应商企业名称',
              minWidth: '130',
              prop: 'enterpriseName'
            },
            {
              id: '4',
              label: '结算事项',
              prop: 'type',
              show: 'template'
            },
            {
              id: '5',
              label: '结算金额',
              prop: 'amount',
              minWidth: '120',
              show: 'template'
            },
            {
              id: '6',
              label: '摘要',
              show: 'template',
              prop: 'businessType'
            },
            {
              id: '7',
              label: '结算时间',
              show: 'template',
              width: '160',
              prop: 'createTime'
            },
            {
              id: '8',
              label: '账户余额',
              minWidth: '120',
              prop: 'changedAmount',
              how: 'template',
            }
          ],
          operation: [],
          data: []
        },
        pageTotal:40,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      // 返回前面一个页面
      goPrewview() {
        this.$router.push({name: 'supplierCapitalAccount', params: {
            page: 'supplierCapitalAccount', currentPage: this.$route.params.currentPage, pageSize: this.$route.params.pageSize
        }})
      },
      exportExcel(){
        this.isSuccess = true;
        let data = {
          ...this.settlementInfo,
          enterpriseName: this.$route.params.enterpriseName,
          userId: this.$route.params.userId
        }
        ajax.export(apis.factory.exportBalance, data).then((res) => {
          this.isSuccess = false;
          if(res.code) {
            if(res.code === "10000000") {

            } else {
              this.$message.error(res.message)
            }
          }
        })
      },
      refreshFuc() {
        this.resetForm('settlementInfo')
        this.currentPage = 1;
        this.pageSize = 10
        this.getData()
      },
      onSearch() {
        this.currentPage = 1;
        this.getData()
      },
      getData() {
        this.settlementTable.loading = true;
        let data = {
          ...this.settlementInfo,
          ...this.$route.params,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.factory.getBalanceList, data).then(res => {
          if(res.code === "10000000") {
            this.settlementTable.data = res.data.dataList;
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.settlementTable.loading = false;
        })
      },
      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      watchDetail() {
        this.isShowFlowDetail = true;
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style scoped>

</style>
